<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .city li{
            padding: 4px;
            margin-bottom: 4px;
            display: flex;
            background-color: #dedede;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        循环指令 v-for 通过取值可循环数据，描述页面中元素需要被创建多少个
            语法: 
                    in 或者 of 为表达式关键字，用于分割 自定义变量和被循环变量;
                    被循环变量 => 取值为 仓库数据、匿名数据、表达式计算结果 【数据可循环】
                    自定义变量 => 数据循环时，当前循环次数中对应的 数据值 【名称随意定义-符合变量名称规则】
                               => 该变量在vue容器中使用方式等效于 data 仓库数据变量-基本类型数据的修改是不会触发响应式的
                               => 该变量只能在 v-for 描述的标签中被使用
                               => 如果该变量名称和当前vue实例的仓库数据变量名称相同，v-for定义的临时变量具有跟高的优先级

                +   v-for=" 自定义变量 in|of 被循环数据 "
                +   v-for=" ( 自定义变量1,自定义变量2 ) in|of 被循环变量 "
                +   v-for=" ( 自定义变量1,自定义变量2,自定义计数器变量 ) in|of 被循环变量 "    【计数器变量只能在部分数据类型循环时可用】

                    ==> 被循环数据取值 Array  v-for=" (item,index) in Array "
                        item 是数组循环时的每个值 ，index为对应的索引
                    ==> 被循环数据取值 Object  v-for=" (value,key,count) in Object "
                        value 是对象循环时每个属性的取值，key为每个属性的名称，count从0开始的循环计数器
                    ==> 被循环数据取值 String  v-for=" (value,index) in String "
                        value 是字符串循环时每个字符值，index为字符对应的下标
                    ==> 被循环数据取值 Number  v-for=" (count1,count2) in Number "
                        count1从1开始的循环计数器,count2从0开始的循环计数器
                    ==> 被循环数据取值 Set  v-for=" (value,count) in Set "
                        value 是Set集合循环时每个元素，count从0开始的循环计数器
        </pre>
        <ul>
            <li>1 : {{ citys[0] }}</li>
            <li>2 : {{ citys[1] }}</li>
            <li>3 : {{ citys[2] }}</li>
            <li>4 : {{ citys[3] }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for=" item in citys ">{{ item }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for=" (item,i) of citys ">{{ i+1 }} : {{ i }} : {{ item }}</li>
        </ul>
        <!-- <p>item:{{ item }}</p> -->
        <hr>
        <ul>
            <li v-for=" v in user ">{{ v }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for=" (v,k,c) in user ">{{ c+1 }} : {{ c }} : {{ k }} : {{ v }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for=" (item,i) of str ">{{ item }}-{{ i }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for=" (c1,c2) of num ">{{ c1 }}-{{ c2 }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for=" (item,c) of set ">{{ item }}-{{ c }}</li>
        </ul>
        <hr>
        <p>citys2:{{ citys2 }}</p>
        <ul class="city">
            <li v-for=" (item,i) of citys2 ">
                <span style="margin-right: 10px;">{{ i+1 }} : {{ item }}</span>
                <!-- 循环定义的变量如果是基本数据类型，直接修改不会导致仓库数据发生变化，数据不会更新页面 -->
                <!-- <input type="text" :value="item" @input=" item=$event.target.value "> -->
                <!-- 循环中定义的变量可以通过，引用指向方式完成数据修改，触发响应式 -->
                <input v-show=" editIndex==i " type="text" :value="item" @input=" citys2[i]=$event.target.value ">
                <input v-if="editIndex!=i" type="button" value="编辑" @click="editIndex=i">
                <input v-else type="button" value="确定" @click="editIndex=-1">
                <input type="button" value="删除" @click="removeCity(i)">
            </li>
        </ul>
        <hr>
        <p>citys3:{{ citys3 }}</p>
        <ul class="city">
            <li v-for=" (item,i) of citys3 ">
                <span style="margin-right: 10px;">{{ i+1 }} : {{ item.name }}</span>
                <input v-show="item.isEdit" type="text" :value="item.name" @input=" item.name=$event.target.value ">
                <input v-if="!item.isEdit" type="button" value="编辑" @click="item.isEdit=true">
                <input v-else type="button" value="确定" @click="item.isEdit=false">
                <input type="button" value="删除" @click=" citys3.splice(i,1) ">
            </li>
        </ul>
    </div>
    <script type="module">
        // for( let k in 被循环数据 ){}
        // for( let a of 被循环数据 ){}

        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    item:"仓库变量item",
                    citys:["南京","上海","广东","济南"],
                    user:{
                        name:"tom",
                        age:23
                    },
                    str:"abcdefg",
                    num:6,
                    set:new Set(["南京","上海","广东","济南"]),
                    citys2:["南京","上海","广东","济南"],
                    editIndex:-1,
                    citys3:[
                        { name:"南京",isEdit:false },
                        { name:"上海",isEdit:false },
                        { name:"广东",isEdit:false },
                        { name:"济南",isEdit:false }
                    ],

                }
            },
            methods:{
                removeCity(i){
                    this.citys2.splice(i,1)
                }
            }
        }).mount("#app");
    </script>
</body>
</html>